import React, {useEffect, useState} from "react";
import CitySelect from 'react-city-select';
import cityData from "../../../data/CIty";
import api from "../../../api"
import "./style.less"

const CityLists=(props)=>{
    const [citysData,setsCityData]=useState(cityData)

   function handleSelectCity(cityData){
      props.onEvent(cityData.name)
   }

   //钩子函数，相当于挂载在页面上的时候去执行这个函数去获取一些内容
   useEffect(()=>{
       api.getCityList().then(res=>{
           if (res.status===200){
               setsCityData(res.data.result.citylist)
           }
       })
   },[])

    return(
        <div>
            <h3>更多城市列表</h3>
            <CitySelect data={citysData} onSelectItem={handleSelectCity}>
            </CitySelect>
        </div>
    )
}
export default CityLists